<template>
    <div id="register">
        <el-row class="register-form">
            <!-- 表单 -->
            <form>
                <el-col :lg="{span:12}" class="register-left">
                    <input type="" name="username" placeholder="用户名" class="input-name" v-model="username">
                    <input type="" name="email" placeholder="邮箱地址" class="input-email" v-model="email">
                    <input type="" name="phone" placeholder="手机号" class="input-phone" v-model="phone">
                    <input type="password" name="password" placeholder="密码" class="input-password" id="pwd" v-model="password">
                    <input type="password" name="tpassword" placeholder="再次输入密码" class="input-password" id="pwd2" v-model="tpassword">
                    <div>
                        <el-button type="primary" @click="submit">提交</el-button>
                    </div>
                </el-col>
            </form>
            <!-- 描述 -->
            <el-col :lg="{span:12}">
                <div class="description">
                    <h3>FullStar</h3>
                    <p>Register Now</p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "register",
        methods:{
            submit(){
                //userPassword, String userName, String email, String phoneNumber
                if(!this.validate())
                    return;
                let url = 'http://localhost:8080/user/add';
                axios.post(url,{userPassword:this.password,userName:this.username,email:this.email,phoneNumber:this.phone}).then(res=>{
                    if(res.data == 0){
                        this.$message("用户名已存在！");
                        return;
                    }
                    this.$router.replace('/login');
                })
            },
            validate(){
                //表单验证
                if(!(this.username!=''&&this.email!=''&&this.phone!=''&&this.phone!=''&&this.password!=''&&this.tpassword!=''))
                {
                    this.$message("请将表单填写完整！");
                    return false;
                }
                if(this.password != this.tpassword)
                {
                    this.$message("两次密码输入不一致！");
                    return false;
                }
                let reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
                if(!reg.test(this.email)){
                    this.$message("请输入合法邮箱地址!");
                    return false;
                }
                reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if(!reg.test(this.phone)){
                    this.$message("请输入正确手机号！");
                    return false;
                }
                reg =  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
                if(!reg.test(this.password)){
                    this.$message("密码长度为8-16个字符，包含至少1个大写字母，1个小写字母和1个数字");
                    return false;
                }
                return true;

            }
        },
        data(){
            return{
                username:'',
                email:'',
                phone:'',
                password:'',
                tpassword:''
            }
        },
        mounted(){
            document.querySelector('body').setAttribute('style', 'background-image: url('+require('@/assets/image/login/bac.jpg')+')');
        },
        beforeDestroy() {
            document.querySelector('body').removeAttribute('style');
        }
    }
</script>

<style scoped>
#register{
    width: 70%;
    margin-left: 15%;
    height: 580px;
    padding-top: 70px;
}
.register-form{
    padding: 20px;
    height: 460px;
    border: 1px solid rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.1);
}
form{
    margin-left: 40px;
    margin-top: 10px;
    width: 80%;
}
form input{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid;
    border-radius: 0;
    outline: none;
    height: 3rem;
    font-size: 16px;
    color: white;
    width: 320px;
    border-color: white;
    margin-bottom: 10px;
}
.el-button--primary {
    color: #FFF;
    font-size: 20px;
    float: right;
    margin-right: 10px;
    background-color: #337ab7;
    border-color: #2e6da4;
    margin-top: 10px;
}
/deep/input::-webkit-input-placeholder {
    color: white;
    font-size: 15px;
}
.description{
    margin-top: 35px;
    margin-left: 150px;
}
.description h3{
    font-size: 50px;
    color: white;
    font-weight: 400;
    margin-top: 140px;
}
.description p:nth-child(2){
    font-size: 28px;
    color: white;
    font-weight: 400;
    margin-top: -35px;
}
.description p:nth-child(3){
    color: #9e9e9e !important;
    font-size: 18px;
}
.register-left{
    padding-top: 10px;
}
</style>